import styled, {css, keyframes} from 'styled-components'

export const MusicListContainer = styled.div`
  //position: absolute;
  //height: 800%;
  //width: 30%;
  //bottom: 0;
  //right: 0;
  position: fixed;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 30vw;
  background: rgb(0, 0, 0,0.5);
`
export const MusicListWrapper = styled.div`
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;

  flex-direction: column;
  >*{

  }
`

export const Top = styled.div`
  position: relative;
  flex: 10;
  border-bottom: 1px solid rgba(0, 0, 0, 0.69);
  display: flex;
  justify-content: center;
  align-items: center;
  .deleteAll{
    position: absolute;
    right: 2rem;
    font-size: 1.2rem;
    margin-left: auto;
  }
`

export const Body = styled.div`
  position: relative;
  flex: 80;
  display: flex;
  justify-content: center;
  align-items: flex-start;
`

export const Footer = styled.div`
  position: relative;
  flex:10;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.69);
`

export const List = styled.div`
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;

  ::-webkit-scrollbar {
    background: transparent;
    width: 0.4rem;
  }

  &:hover::-webkit-scrollbar-thumb {
    border-radius: 2rem;
    background: rgb(59, 52, 53);
  }
  
`

export const MusicListItem = styled.div`
  position: relative;
  width: 100%;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  
  display: flex;
  
  
  &:hover {
    background: #999999;
  }
`
export const SongInfo = styled.div`

  .songTitle {
    font-size: 1rem;
  }
  .artistName {
    >*{
      font-size: 0.8rem;
      color: #d5d5d5;
    }
  }
`
export const Controls = styled.div`
  position: relative;
  height: 100%;
  margin-left:auto;
  display: flex;
  justify-self: center;
  align-items: center;
  
  *{
      font-size:1.2rem;
      padding: 0 0.3rem;
  }

  
`